<template>
  <view>
    <uni-transition :mode-class="['slide-bottom']" :show="true" :styles="cartBarStyles">
      <view class="left">
        <view class="detail-action" @tap="details">
          <image src="/static/images/index/icon_shopping_bag.png" class="shopbag-btn"></image>
          <view class="badge">{{ cartNum + requireCartNum }}</view>
        </view>
        <view class="price">
          <text class="fsize-24">￥</text>
          <text>{{ cartPrice }}</text>
        </view>
      </view>
      <view v-if="isDesk" type="primary" class="right" @tap="pay">立即支付</view>
      <!-- 多了立即下单 -->
      <view v-else type="primary" class="right" @tap="onOrder">立即下单</view>
    </uni-transition>
    <view class=""></view>
    <cart-popup :requireCart="requireCart" :cart="cart" ref="cartPopup" @add="add" @minus="minus" @clear="clear"></cart-popup>
  </view>
</template>

<script>
import uniTransition from '@/components/uni-transition/uni-transition.vue';
import cartPopup from '../cart-popup/cart-popup.vue';
import { mapState } from 'vuex';
export default {
  name: 'CartBar',
  components: {
    uniTransition,
    cartPopup
  },
  props: {
    cart: {
      type: Array,
      default: () => []
    },
    requireCart: {
      type: Array,
      default: () => []
    }
  },
  created() {
    this.onIsDesk();
  },
  updated() {
    this.onIsDesk();
  },
  computed: {
    ...mapState(['userInfo']),
    cartNum() {
      //计算购物车总数
      // console.log(this.cart);
      return this.cart.reduce((acc, cur) => acc + cur.number, 0);
    },
    requireCartNum() {
      // console.log(this.cart);
      return this.requireCart.reduce((acc, cur) => acc + cur.fQty, 0);
    },
    cartPrice() {
      //计算购物车总价
      // const price = this.cart.reduce((acc, cur) => acc + cur.number * cur.FPosPrice, 0)
      // if (this.cart.vipPrice === 0) {
      // 	console.log(this.requireCart.reduce((a,b) => a + (b.fPosPrice * b.fQty), 0));
      // 	const price = this.cart.reduce((acc, cur) => acc + cur.number * cur.FPosPrice, 0) + this.requireCart.reduce((a,
      // 		b) => a + (b.fPosPrice * b.fQty), 0)
      // 	return price.toFixed(2)
      // } else {
      // 	console.log(1223);
      // 	const price = this.cart.reduce((acc, cur) => acc + cur.number * cur.vipPrice, 0) + this.requireCart.reduce((a,
      // 		b) => a + (b.fPosPrice * b.fQty), 0)
      // 	return price.toFixed(2)
      // }
      // console.log(this.cart, this.requireCart);
      const price =
        this.cart.reduce((acc, cur) => {
          if (this.userInfo.id && cur.vipPrice !== 0) {
            return acc + cur.vipPrice * cur.number;
          } else {
            // 没有会员
            return acc + cur.FPosPrice * cur.number;
          }
        }, 0) +
        this.requireCart.reduce((a, b) => {
          if (this.userInfo.id && b.vipPrice !== 0) {
            return a + b.vipPrice * b.fQty;
          } else {
            return a + b.fPosPrice * b.fQty;
          }
        }, 0);
      return price.toFixed(2);
    }
  },
  data() {
    return {
      isDesk: true,
      cartBarStyles: {
        position: 'fixed',
        bottom: '10rpx',
        left: '20rpx',
        // #ifdef H5
        bottom: 'var(--window-bottom)',
        // #endif
        width: '710rpx',
        'z-index': '995',
        height: '92rpx',
        background: 'rgba(255,255,255,0.96)',
        display: 'flex',
        'justify-content': 'space-between',
        'align-items': 'center',
        border: '1px solid #f0f0f0',
        'border-radius': '46rpx'
      }
    };
  },
  methods: {
    onIsDesk() {
      const res = uni.getStorageSync('deskId') || 0;
      if (res === 0) {
        this.isDesk = true;
      } else {
        this.isDesk = false;
      }
    },
    details() {
      // 打开cartPopup弹出层
      this.$refs['cartPopup'].open();
      // console.log('open')
    },
    add(product) {
      this.$emit('add', {
        ...product,
        number: 1
      });
    },
    minus(product) {
      this.$emit('minus', product);
    },
    clear() {
      this.$emit('clear');
    },
    pay() {
      this.$emit('pay');
    },
    // 立即下单
    onOrder() {
      this.$emit('onOrder');
    }
  },
  watch: {
    cartNum(val) {
      if (!val) {
        this.$refs['cartPopup'].close();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.left {
  display: flex;
  align-items: center;

  .detail-action {
    box-shadow: 0 10rpx 10rpx 0 rgba($color: #c8c7cc, $alpha: 0.2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 100rpx;
    margin-right: 60rpx;
    margin-left: 20rpx;

    .shopbag-btn {
      display: block;
      width: 138rpx;
      height: 110rpx;
      position: absolute;
      left: 0;
      bottom: 20rpx;
    }

    .badge {
      width: 36rpx;
      height: 36rpx;
      font-size: 20rpx;
      color: #111111;
      line-height: 36rpx;
      background: linear-gradient(34deg, #f3c45d, #edac2f);
      border: 1px solid #f5f5f5;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      right: -38rpx;
      top: -20rpx;
    }
  }

  .price {
    font-size: 36rpx;
    font-weight: bold;
    color: #111111;
  }
}

.right {
  width: 200rpx;
  height: 84rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #111111;
  line-height: 84rpx;
  text-align: center;
  background: linear-gradient(34deg, #f3c45d, #edac2f);
  border-radius: 42rpx;
}
</style>
